<template>
  <!-- 历史就诊页面 -->
  <header class="Headerclass19">
    <img
      src="../../../images//fae98107-94c4-47d1-ab04-f3e21ba7d864.png"
      alt=""
      @click="Gohui"
    />
    <h4>历史问诊</h4>
    <b @click="Gogift">收到的礼物</b>
  </header>
  <main class="MainH5">
    <div v-for="item in hitst.list" :key="item.id" class="item">
      <img :src="item.href" alt="" class="imghist" />
      <div class="Hp6">
        <h3>问诊人:{{ item.name }}</h3>
        <p>问诊时间:{{ item.timewz }}</p>
      </div>
      <div class="Buttonclass">
        <div v-if="item.showif">
          <el-button type="primary" round @click="onGo(item.name)"
            >查看问诊记录</el-button
          >
        </div>
        <div v-else>暂无数据</div>
        <div v-if="item.showall">
          <el-button class="check" type="primary" round @click="Appraise"
            >查看评价</el-button
          >
        </div>
        <div v-else>暂无数据</div>
      </div>
    </div>
  </main>
</template>

<script setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const Gohui = () => {
  router.go(-1);
};
const myDate = new Date();
const formatDate = (date) => {
  return date.toLocaleDateString();
};
const hitst = reactive({
  list: [
    {
      id: 1,
      name: "唐嫣",
      timewz: formatDate(myDate),
      href: "https://img.keaitupian.cn/newupload/11/1667293030164511.jpg",
      showif: true, //历史记录
      showall: true, //评价
    },
    {
      id: 2,
      name: "郭富城",
      timewz: formatDate(myDate),
      href: "https://img.keaitupian.cn/newupload/11/1667293030164511.jpg",
      showif: true,
      showall: true,
    },
    {
      id: 3,
      name: "涂天明",
      timewz: formatDate(myDate),
      href: "https://img.keaitupian.cn/newupload/11/1667293030164511.jpg",
      showif: false,
      showall: true,
    },
    {
      id: 4,
      name: "涂山雅雅",
      timewz: formatDate(myDate),
      href: "https://img.keaitupian.cn/newupload/11/1667293030164511.jpg",
      showif: true,
      showall: true,
    },
    {
      id: 5,
      name: "图兰",
      timewz: formatDate(myDate),
      href: "https://img.keaitupian.cn/newupload/11/1667293030164511.jpg",
      showif: true,
      showall: false,
    },
  ],
});
const onGo = (item) => {
  router.push(`/Recording/${item}`);
};
const Appraise = () => {
  router.push("/Appraise");
};
const Gogift = () => {
  router.push("/Gift");
};
</script>

<style lang="scss" scoped>
.Headerclass19 {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.Headerclass19 h4 {
  font-size: 16px;
  padding-left: 30px;
}

.Headerclass19 b {
  font-size: 16px;
  padding-right: 20px;
}

.el-icon-back {
  font-size: 25px;
}
.imghist {
  width: 80px;
  height: 80px;
  border-radius: 50% 50%;
  margin-top: 10px;
}
.MainH5 {
  width: 100%;
  height: 95%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: auto;
  .item {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 90%;
    height: 20%;
    border: 1px solid #dfdfdf;
    background-color: aliceblue;
    margin-top: 20px;
    .Hp6 {
      margin-left: 30px;
    }
    .Buttonclass {
      display: flex;
      flex-direction: column;
      align-items: center;
      .check {
        margin-top: 10px;
      }
    }
  }
}
</style>
